<template>
    <div class="list">
        <div class="header">
          <router-link :to="{ name:'UserCenter'}">
            <van-icon name="cross" size="1.3rem"/>
          </router-link>
          <router-link style="margin-right:1rem;color: black;" :to="{ name:'Reg'}">
            注册账号 >
          </router-link>
        </div>
        <div class="login-title">登陆账号</div>
        <div class="first-login-info">首次登录会自动创建账号</div>

        <div class="login">
          <van-cell-group>
            <van-field
              v-model="userName"
              clearable
              right-icon="question-o"
              placeholder="请输入用户名"
              @click-right-icon="$toast('question')"
            />

            <van-field
              v-model="password"
              type="password"
              placeholder="请输入密码"
            />
          </van-cell-group>

          <van-checkbox v-model="checked">同意<a>顺丰优选用户协议</a></van-checkbox>

          <van-button @click="loginHandle" style="margin-top:2rem;" size="large" type="primary">登陆</van-button>

          <div class="qtfs">
            <div class="line"></div>
            <div class="other-login-text">其他方式登录</div>
            <div class="line"></div>
          </div>

          <div class="Img">
            <img style="margin-left:3rem" src="../assets/sf.png" alt="">
            <img src="../assets/QQ.png" alt="">
            <img src="../assets/wx.png" alt="">
            <img src="../assets/zfb.png" alt="">
            <img src="../assets/wb.png" alt="">
          </div>
        </div>
     </div>
</template>
<script>
import { login } from '../servers/user.js'
import { loginIn } from '../utils/auth.js'
// import { serverUrl } from '../utils/config.js'

export default {
  data(){
    return {
      checked: true,
      userName:'',
      password:''
    }
  },
  methods:{
    loginHandle(){
      if(!this.userName || !this.password){
        alert('请输入账号密码')
          return
      }
      login(this.userName,this.password)
        .then(res=>{
          if(res.data.code == "success"){
            loginIn(res.data.token);
            alert('登陆成功')
            localStorage.setItem('userName',this.userName)
            this.islogined=true;
            this.$router.push({
                name:'UserCenterCG',
                params:{
                userName:this.userName
                }
            });
          }else if((res.data.message = "用户密码错误，请重新输入")){
            alert( "用户密码错误，请重新输入")
          }else{
            alert("登陆失败")
          }
        })
        // .catch(err=>{
        //   console.log(err)
        // })
    }
  },
  created(){
    console.log(this.userName)
  }
}
</script>

<style scoped>
  *{
    margin: 0;padding: 0;
  }
  .header{
    height: 3.456rem;
    line-height: 3.456rem;
    background: #f4f4f4;
    display: flex;
    justify-content: space-between;
  }
  .header .van-icon{
    margin: 1rem;
  }
  .login-title {
    height: 1.28rem;
    line-height: 1.28rem;
    padding: 0 1.28rem;
    font-size: 1.2rem;
    color: #000;
    text-align: left;
  }
  .first-login-info {
    height: 0.768rem;
    padding: 0 1.28rem;
    font-size: 0.5rem;
    color: #7f7f7f;
    line-height: 1;
    text-align: left;
    margin-top: 0.5rem;
  }
  .login {
    padding: 1.5547rem 1.1947rem 0.9387rem;
  }
  .van-field{
    height: 3rem;
  }
  .van-checkbox a{
    color: #000000;
    border-bottom: 1px solid #979797;
  }
  .login div{
    margin-top:1rem;
    background: #f4f4f4;
  }
  .login .line {
    display: inline-block;
    width: 4.7787rem;
    border-top: 2px solid #ededed;
    margin-bottom: 0.128rem;
  }
  .login .line:first-child{
    margin-left: 3rem;
  }
  .login .other-login-text {
    display: inline-block;
    font-size: 0.512rem;
    color: #7f7f7f;
    padding: 0 0.1067rem;
  }
  .Img{
    width:100%;
    margin: 0 auto;
    text-align: center;
  }
  .Img img{
    margin: 0 0.5rem;
  }
  .van-cell{
    background: #f4f4f4
  }
  .qtfs{
    width:100%;
    margin: 0 auto;
    text-align: center;
  }

</style>
